<script lang="ts" setup>
import AppHeader from '@/components/Header/index.vue';
import SideBar from '@/components/NewSider/index.vue';
import { RouterView, useRoute } from 'vue-router';
import { computed } from 'vue';
import detailBg from '@/assets/detail_background_page.png';
import squareBg from '@/assets/square_home_background.png';

const route = useRoute();

// 使用细节背景图正则判断列表如下
const detailBackgroundRegexList = [/^\/user\/data\/\d+$/, /^\/user\/model\/\d+$/];

// 计算背景图URL
const backgroundImage = computed(() => {
  if (detailBackgroundRegexList.some(regex => regex.test(route.path)))
    return `url(${detailBg})`;

  return `url(${squareBg})`;
});
</script>

<template>
  <a-layout style="display: flex; flex-direction: row; height: 100vh;">
    <SideBar v-show="$route.meta.showHeaderSider" />
    <a-layout class="main-layout" :style="{ backgroundImage }">
      <AppHeader v-show="$route.meta.showHeaderSider" style="background-color: transparent;" />
      <RouterView />
    </a-layout>
  </a-layout>

  <a-layout />
</template>

<style scoped lang="scss">
.main-layout {
  background-size: cover;
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
